
<!-- 页面说明 -->
<template>
  <main class="page-main">
    <a-form :model="formData" layout="vertical" name="basic" autocomplete="off" @finish="onFinish"
      @finishFailed="onFinishFailed">
      <a-form-item label="用户名" name='accountNo' :rules='rules.accountNo'>
        <a-input v-model:value='formData.accountNo' placeholder="请输入用户名" />
      </a-form-item>
      <a-form-item label="密码" name='password' :rules='rules.password'>
        <a-input-password v-model:value='formData.password' placeholder="请输入密码(至少8位，数字字母组合)" />
      </a-form-item>
      <a-button style="padding: 10px;height: 50px;" class="width" type="primary" html-type="submit">登录</a-button>
    </a-form>
  </main>
</template>
<script lang="ts">
import * as apiUtil from "@/api/ApiUtils";
import * as api from "@/api/AuthUserApi";
import { notification } from "ant-design-vue";

export default {
  components: {},
  data() {
    return {
      formData: {
        accountNo: "",
        password: "",
      },
      rules: {
        accountNo: [{ required: true, message: "账号必填!" }],
        password: [{ required: true, message: "密码必填!" }],
      },
    };
  },
  methods: {
    onFinish(values: any) {
      console.log("Success:", values, this.$props.dataId);
      this.handleLogin();
    },
    onFinishFailed(errorInfo: any) {
      console.log("Failed:", errorInfo);
    },
    handleFailed() {},
    /**
     * 登录
     */
    handleLogin() {
      api.login(this.formData).then((res) => {
        if (apiUtil.isSuccessed(res)) {
          let data = res.data;
          localStorage.setItem("Authorization", data.token);
          localStorage.setItem("AuthUser", JSON.stringify(data));
          notification.success({
            message: "登录成功",
          });
          this.$router.push("/");
        } else {
          this.handleFailed();
          //请求失败
          notification.error({
            message: "登录失败",
            description: res.message,
          });
        }
      });
    },
  },
  computed: {},
  watch: {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.page-main {
  width: 350px;
  .ant-form-item {
    margin-bottom: 20px;
    .ant-input {
      height: 45px;
      width: 100%;
      box-sizing: border-box;
      font-size: 17px;
      border: 0;
      border-radius: 0;
      background-color: #f8f8f8;
      padding: 0 15px;
      border-radius: 6px;
      position: relative;

      &:-webkit-autofill {
        box-shadow: none;
        -webkit-box-shadow: 0 0 0 1000px #f8f8f8 inset;
        box-shadow: 0 0 0 1000px #f8f8f8 inset;
      }

      &::placeholder {
        font-size: 14px;
      }
    }
    .ant-input-password {
      height: 45px;
      width: 100%;
      box-sizing: border-box;
      font-size: 17px;
      border: 0;
      border-radius: 0;
      background-color: #f8f8f8;
      padding: 0 15px;
      border-radius: 6px;
      position: relative;

      &:-webkit-autofill {
        box-shadow: none;
        -webkit-box-shadow: 0 0 0 1000px #f8f8f8 inset;
        box-shadow: 0 0 0 1000px #f8f8f8 inset;
      }

      &::placeholder {
        font-size: 14px;
      }
    }
  }
}
</style>